<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
    .sousuo{
	width: 100vw;
	height: 10vw;
	background-color: #ffffff;
}
input{
        background-color: #e6e6e6;
        border-radius: 8px;
        margin-left: 55px;
    }
    .tu{
        width: 100vw;
        margin-top: 10px;
       
    }
    li{
        padding: 3vw;
        list-style: none;
    }
    .fenlei{
        width: 100vw;
	height: 44vw;
        margin-top: 3vw;
        & ul{
            width: 100vw;
            
        display: flex;
        & img{
            width: 12vw;
            height: 12vw;
        }
    }
    }
    .lan{
        margin-top: 30vw;
	width: 100vw;
	height: 3vw;
	background-color: #f4f4f4;
}
.lan1{
        margin-top: 5vw;
	width: 100vw;
	height: 3vw;
	background-color: #f4f4f4;
}
.tuijian{
    text-align: center;
    margin-left: -20vw;
}
.weiyi{
    margin-left: -10vw;
}
.box{
	width: 99vw;
	height: 172vw;
    
    & img{
        padding: 10vw;
        width: 25vw;
        height: 35vw;
    }
}
</style>
<body>
    <div class="sousuo">
        <img src="./img/logo.png" alt="">
        <input type="text" placeholder="请输入商品名称" width="70%">
    </div>
    <div class="tu">
        <img src="OIP-C (1).jpg" width="80%">
    </div>
    <div class="fenlei">
        <div class="weiyi">
        <ul>
            <li><img src=""><p>洗发水</p></li>
            <li><img src=""><p>洗面奶</p></li>
            <li><img src=""><P>牙膏</P></li><br>
            <li><img src=""><P>沐浴露</P></li>
            <li><img src=""><p>洗手液</p></li>
        </ul>
    </div>
    <div class="weiyi">
        <ul>
            <li><img src=""><p>洗衣粉</p></li>
            <li><img src=""><p>洗衣液</p></li>
            <li><img src=""><P>洗碗精</P></li><br>
            <li><img src=""><P>纸巾</P></li>
            <li><img src=""><p>香皂</p></li>
        </ul>
    </div>
    </div>
<div class="lan">
    
</div>

<div class="tuijian">
    <h2>为你推荐</h2>
    
</div>

<div class="box">
    <img src="O1CN01pc5YdS1gCb4Lxr5kX_!!0-item_pic.avif">
    <img src="O1CN01Xtog0i1PxRqi8OScD_!!666751907.avif">
    <img src="O1CN01pc5YdS1gCb4Lxr5kX_!!0-item_pic.avif">
    <img src="O1CN01Xtog0i1PxRqi8OScD_!!666751907.avif">
</div>

    
</body>
</html>